Vue.createApp({
    data(){
        return {
            // 初始购物车数据
            cartItems: [
              { id: 1, name: "Chicken Wing", category: "Food", qty: 3, price: 10 },
              { id: 2, name: "Pizza", category: "Food", qty: 1, price: 50 },
              { id: 3, name: "Hamburger", category: "Food", qty: 1, price: 12 },
              { id: 4, name: "Coca Cola", category: "Drink", qty: 2, price: 5 },
              { id: 5, name: "Orange Juice", category: "Drink", qty: 1, price: 15 },
              { id: 6, name: "Potato Chips", category: "Snack", qty: 1, price: 8 },
            ],
            // 排序相关
            sortKey: 'name',
            //排序方向
            sortOrder: 'asc',
            // 通知
            notification: {
              show: false,
              message: ''
            }
        }
    },
    computed: {
        // 计算商品总数
        totalItems() {
          return this.cartItems.reduce((total, item) => total + item.qty, 0);
        },
        // 计算商品总价
        subtotal() {
          return this.cartItems.reduce((total, item) => total + (item.price * item.qty), 0);
        },
        // 计算总金额（包含税费等，这里简化为总价）
        totalAmount() {
          return this.subtotal;
        }
      },
    methods: {
        // 增加商品数量
        increaseQty(productId) {
          //使用 find 方法遍历 cartItems 数组，找到 id 匹配的商品对象。
          const product = this.cartItems.find(item => item.id === productId);
          //找到
          if (product) {
            product.qty += 1;
            this.showNotification(`${product.name} 数量已增加`);
          }
        },
        // 减少商品数量
        decreaseQty(productId) {
          const product = this.cartItems.find(item => item.id === productId);
          if (product && product.qty > 1) {
            product.qty -= 1;
            this.showNotification(`${product.name} 数量已减少`);
          }
        },
        // 直接更新商品数量
        updateQty(productId, newQty) {
          const product = this.cartItems.find(item => item.id === productId);
          if (product) {
            newQty = parseInt(newQty);
            if (isNaN(newQty) || newQty < 1) {
              product.qty = 1;
              this.showNotification('数量不能小于1', 'warning');
            } else {
              product.qty = newQty;
              this.showNotification(`${product.name} 数量已更新为 ${newQty}`);
            }
          }
        },
        // 删除商品
        removeProduct(productId) {
          const productIndex = this.cartItems.findIndex(item => item.id === productId);
          if (productIndex !== -1) {
            const productName = this.cartItems[productIndex].name;
            this.cartItems.splice(productIndex, 1);
            this.showNotification(`${productName} 已从购物车移除`);
          }
        },
        // 清空购物车
        clearCart() {
          if (this.cartItems.length > 0) {
            this.cartItems = [];
            this.showNotification('购物车已清空');
          }
        },
        // 结算
        checkout() {
          if (this.cartItems.length === 0) {
            this.showNotification('购物车为空，无法结算', 'warning');
            return;
          }
          // 这里可以添加结算逻辑，如跳转到支付页面等
          this.showNotification(`结算成功！共支付 ¥${this.totalAmount.toFixed(2)}`, 'success');
          // 结算后清空购物车
          this.cartItems = [];
        },
        // 排序商品
        sortProducts() {
          this.cartItems.sort((a, b) => {
            if (this.sortKey === 'name') {
              return this.sortOrder === 'asc' 
                ? a.name.localeCompare(b.name) 
                : b.name.localeCompare(a.name);
            } else {
              return this.sortOrder === 'asc' 
                ? a[this.sortKey] - b[this.sortKey] 
                : b[this.sortKey] - a[this.sortKey];
            }
          });
          this.showNotification(`商品已按${this.getSortKeyText()}${this.sortOrder === 'asc' ? '升序' : '降序'}排列`);
        },
        // 切换排序顺序
        toggleSortOrder() {
          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
          this.sortProducts();
        },
        // 获取排序键的文本描述
        getSortKeyText() {
          const map = {
            name: '名称',
            price: '价格',
            qty: '数量'
          };
          return map[this.sortKey] || this.sortKey;
        },
        // 显示通知
        showNotification(message, type = 'info') {
          this.notification.message = message;
          this.notification.show = true;
          
          // 根据类型添加不同的样式
          if (type === 'success') {
            this.$el.querySelector('.fixed.bottom-4.right-4').classList.add('bg-green-600');
          } else if (type === 'warning') {
            this.$el.querySelector('.fixed.bottom-4.right-4').classList.add('bg-orange-500');
          } else {
            this.$el.querySelector('.fixed.bottom-4.right-4').classList.add('bg-neutral');
          }
          
          // 3秒后隐藏通知
          setTimeout(() => {
            this.notification.show = false;
            // 移除添加的样式类
            const notificationEl = this.$el.querySelector('.fixed.bottom-4.right-4');
            if (notificationEl) {
              notificationEl.classList.remove('bg-green-600', 'bg-orange-500', 'bg-neutral');
            }
          }, 3000);
        }
    }

}).mount('#app')